<template>
	<view class="iconfont" @click="goback" style=" width: 50rpx;margin-top: 8rpx;font-size: 40rpx;">&#xe6b1;</view>
	<view class="content" v-for="item in Arr">
		<!-- 商品信息 -->
		<view class="goodsMsg">
			<view class="pic">
				<image :src="IP+item.yp_imgsrc" mode=""></image>
			</view>
			<view>
				<text class="describe">Rx</text><text>{{item.yp_mingcheng}}</text><text>×{{item.yaopinshuliang}}</text>
				<view class="">
					规格：{{item.yp_guige}}
				</view>
				<view class="price">
					￥{{item.yp_jiage}}
				</view>
			</view>
		</view>
		<view class="Refundmoney">
			<view>退款金额:</view>
			<view style="color: red;">￥{{parseInt(item.yp_jiage)*parseInt(item.yaopinshuliang)+parseInt(item.yp_yunfei)}}</view>
		</view>
		<view class="refundReason">
			<view>
				<view>退款原因</view>
				<view style="display: flex;">
					<view>请选择</view>
					<view class="iconfont">&#xe6a5;</view>
				</view>
			</view>
			<view>退款联系人：{{item.s_people}}</view>
			<view>联系方式：{{item.s_tel}}</view>
		</view>
	</view>
	<view class="footer">
		提交
	</view>
</template>

<script>
	import {
		onLoad,
	} from '@dcloudio/uni-app';
	import {
		reactive,
		toRefs,
		onMounted
	} from 'vue';
	// 引http
	import http from '../../utils/http.js';
	import {
		useStore
	} from 'vuex';
	let id;
	// let Arr = [];
	export default {
		setup() {
			const {
				state,
				getters,
				commit,
				dispatch
			} = useStore()
			onLoad((e) => {
				console.log(e.id)
				id = e.id
			})
			onMounted(() => {

				for (let i = 0; i < state.dingdan.dingdan.length; i++) {
					if (state.dingdan.dingdan[i].ypdd_id == id) {
						data.Arr.push(state.dingdan.dingdan[i])
					}
				}
				console.log(data.Arr)
			})
			let data = reactive({
				IP: 'http://localhost:8088',
				Arr: [],
				goback() {
					uni.redirectTo({
						url: '/pages/myorder/order?iskind=待发货',
					})
				}
			})
			return {
				...toRefs(data)
			}
		},
	}
</script>

<style lang="scss">
	@import url("~@/static/fonts/iconfont.css");

	.content {
		background-color: #F2F2F2;
		border: 0.5rpx solid #F2F2F2;
		margin-top: 30rpx;
	}

	.goodsMsg {
		display: flex;
		background-color: white;
		padding-top: 40rpx;

		.pic {
			width: 200rpx;
			height: 200rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.describe {
			background-color: red;
			color: white;
			border-radius: 20%;
			padding: 0 15rpx;
		}

		.price {
			color: red;
			margin-top: 20rpx;
		}
	}

	.Refundmoney {
		margin-top: 20rpx;
		background-color: white;
		display: flex;
		justify-content: space-between;
		height: 100rpx;
		line-height: 100rpx;
	}

	.refundReason {
		margin-top: 20rpx;
		background-color: white;

		view:first-child {
			display: flex;
			justify-content: space-between;
			height: 150rpx;
			line-height: 150rpx;
		}
	}

	.footer {
		position: fixed;
		bottom: 0;
		width: 100%;
		background-color: #DA2222;
		height: 80rpx;
		text-align: center;
		line-height: 80rpx;
		color: white;
	}
</style>
